<template>
  <a-modal
    :title="currTitle"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="closable"
  >
    <template slot="footer">
      <a-button v-if="closable" @click="close">关闭</a-button>
      <a-button type="primary" @click="departOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        :labelCol="{span:4}"
        :wrapperCol="{span:20}"
        style="margin-bottom:10px"
        :validate-status="validate_status"
      >
        <a-tooltip placement="topLeft">
          <template slot="title">
            <span>您隶属于多部门，请选择当前所在部门</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold" />
        </a-tooltip>
        <a-select
          v-model="departSelected"
          :class="{'valid-error':validate_status=='error'}"
          placeholder="请选择登录部门"
          style="margin-left:10px;width: 80%"
        >
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option v-for="d in departList" :key="d.id" :value="d.orgCode">{{ d.departName }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
//import Vue from 'vue'
import { getAction, putAction } from "@/api/manage";
import store from "@/store/";
import { USER_INFO } from "@/store/mutation-types";

export default {
  name: "DepartSelect",
  props: {
    title: {
      type: String,
      default: "部门选择",
      required: false
    },
    closable: {
      type: Boolean,
      default: false,
      required: false
    },
    username: {
      type: String,
      default: "",
      required: false
    }
  },
  watch: {
    username(val) {
      if (val) {
        this.loadDepartList();
      }
    }
  },
  data() {
    return {
      currTitle: this.title,
      visible: false,
      departList: [],
      departSelected: "",
      validate_status: "",
      currDepartName: ""
    };
  },
  created() {
    //this.loadDepartList()
  },
  methods: {
    loadDepartList() {
      return new Promise(resolve => {
        let url = "/sys/user/getCurrentUserDeparts";
        this.currDepartName = "";
        getAction(url).then(res => {
          if (res.success) {
            let departs = res.result.list;
            let orgCode = res.result.orgCode;
            if (departs && departs.length > 0) {
              for (let i of departs) {
                if (i.orgCode == orgCode) {
                  this.currDepartName = i.departName;
                  break;
                }
              }
            }
            this.departSelected = orgCode;
            this.departList = departs;
            if (this.currDepartName) {
              this.currTitle =
                "部门切换（当前部门 : " + this.currDepartName + "）";
            }
          }
          resolve();
        });
      });
    },
    close() {
      this.departClear();
    },
    departOk() {
      if (!this.departSelected) {
        this.validate_status = "error";
        return false;
      }
      let obj = {
        orgCode: this.departSelected,
        username: this.username
      };
      putAction("/sys/selectDepart", obj).then(res => {
        try {
          if (res.success) {
            const userInfo = res.result.userInfo;
            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
            store.commit("SET_INFO", userInfo);
            //console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
            this.departClear();
          }
        } catch (error) {
          console.error(error);
        }
      });
    },
    show() {
      //如果组件传值username此处就不用loadDepartList了
      this.loadDepartList().then(() => {
        this.visible = true;
        if (!this.departList || this.departList.length <= 0) {
          this.$message.warning("您尚未设置部门信息!");
          this.departClear();
        }
      });
    },
    departClear() {
      this.departList = [];
      this.departSelected = "";
      this.visible = false;
      this.validate_status = "";
      this.currDepartName = "";
    }
  }
};
</script>
<style scoped>
.valid-error .ant-select-selection__placeholder {
  color: #f5222d;
}
</style>